<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<form class="layui-form">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md5">

            <table id="maintable" lay-filter="maintable"></table>
            <div class="layui-col-md2">
                &nbsp;
            </div>
            <div class="layui-col-md4">
                <input type="text" id="mainNameInpute" class="layui-input">
            </div>
            <div class="layui-col-md2">
                <button type="button" class="layui-btn layui-btn-fluid" id="saveMainMenu">保存</button>
            </div>

        </div>
        <div class="layui-col-md7">

            <div id="menuChildrenDiv">
                <table id="subtable" lay-filter="subtable"></table>
                <div class="layui-col-md1">
                    &nbsp;
                </div>
                <div class="layui-col-md3">
                    <input type="text" id="subNameInpute" class="layui-input">
                </div>
                <div class="layui-col-md5">
                    <input type="text" id="subUrlInpute" class="layui-input">
                </div>
                <div class="layui-col-md2">
                    <button type="button" class="layui-btn layui-btn-fluid" id="saveSubMenu">保存</button>
                </div>
            </div>

        </div>
    </div>
</form>


<script src="../../layuiadmin/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'util'], function () {
        var $ = layui.$
            , table = layui.table
            , tree = layui.tree
            , util = layui.util
            , transfer = layui.transfer
            , form = layui.form
            , publicMenuId = '';

        $('#menuChildrenDiv').hide();

        table.render({
            elem: '#maintable'
            , url: 'http://localhost:8086/selectAllMenus'
            , cols: [
                [
                    {field: 'id', title: 'ID', align: "center"}
                    , {
                    field: 'mainname',
                    style: 'cursor: pointer;',
                    title: '主分类',
                    event: 'setMainName',
                    align: "center"
                }
                    , {
                    field: 'enabled', title: '操作', align: 'center', templet:
                        function (row) {
                            if (row.enabled == 'Y') {
                                return '<button type="button" class="layui-btn layui-btn-warm layui-btn-sm updateRole" lay-event="edit">编辑</button>' +
                                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm offMenu" lay-event="off">禁用</button>';
                            } else if (row.enabled == 'N') {
                                return '<button type="button" class="layui-btn layui-btn-warm layui-btn-sm updateRole" lay-event="edit">编辑</button>' +
                                    '<button type="button" class="layui-btn layui-btn-normal layui-btn-sm onMenu" lay-event="on">启用</button>';
                            }
                        }
                }
                ]
            ]
        });

        /**
         *主监听工具条
         */
        table.on('tool(maintable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'setMainName') {
                /**
                 *修改主名称
                 */
                layer.prompt({
                    formType: 2
                    , title: '修改 ID 为 [' + data.id + '] 的主分类名'
                    , value: data.mainname
                }, function (value, index) {
                    layer.close(index);
                    //这里一般是发送修改的Ajax请求
                    var menus = [];
                    var menu = {};
                    menu.id = data.id;
                    menu.mainname = value;
                    menus.push(menu);
                    $.ajax({
                        url: 'http://localhost:8086/updateMenuName',
                        type: 'post',
                        data: JSON.stringify(menus),
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            if (result.data == 0) {
                                alert("修改失败");
                            } else {
                                //同步更新表格和缓存对应的值
                                obj.update({
                                    mainname: value
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                publicMenuId = data.id;
                $('#menuChildrenDiv').show();
                table.render({
                    elem: '#subtable'
                    , url: 'http://localhost:8086/selectSubMenus?id=' + data.id
                    , cols: [
                        [
                            {field: 'id', title: 'ID', align: "center"}
                            , {
                            field: 'mainname',
                            style: 'cursor: pointer;',
                            title: '子分类',
                            event: 'setSubName',
                            align: "center"
                        }
                            , {
                            field: 'url',
                            style: 'cursor: pointer;',
                            title: '子分类路径',
                            event: 'setSubUrl',
                            align: "center"
                        }
                            , {
                            field: 'enabled', title: '操作', align: 'center', templet:
                                function (row) {
                                    if (row.enabled == 'Y') {
                                        return '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm offMenu" lay-event="soff">禁用</button>';
                                    } else if (row.enabled == 'N') {
                                        return '<button type="button" class="layui-btn layui-btn-normal layui-btn-sm onMenu" lay-event="son">启用</button>';
                                    }
                                }
                        }
                        ]
                    ]
                });
            } else if (obj.event === 'on') {
                $.ajax({
                    url: 'http://localhost:8086/turnOn?id=' + data.id,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        if (result.data == 0) {
                            alert("修改失败");
                        } else {
                            table.reload('maintable', {
                                url: 'http://localhost:8086/selectAllMenus'
                            });
                        }
                    }
                });
            } else if (obj.event === 'off') {
                $.ajax({
                    url: 'http://localhost:8086/turnOff?id=' + data.id,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        if (result.data == 0) {
                            alert("修改失败");
                        } else {
                            table.reload('maintable', {
                                url: 'http://localhost:8086/selectAllMenus'
                            });
                        }
                    }
                });
            }
        });

        /**
         *子监听
         */
        table.on('tool(subtable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'setSubName') {
                /**
                 *修改主名称
                 */
                layer.prompt({
                    formType: 2
                    , title: '修改 ID 为 [' + data.id + '] 的子分类名'
                    , value: data.mainname
                }, function (value, index) {
                    layer.close(index);
                    //这里一般是发送修改的Ajax请求
                    var menus = [];
                    var menu = {};
                    menu.id = data.id;
                    menu.mainname = value;
                    menus.push(menu);
                    $.ajax({
                        url: 'http://localhost:8086/updateMenuName',
                        type: 'post',
                        data: JSON.stringify(menus),
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            if (result.data == 0) {
                                alert("修改失败");
                            } else {
                                //同步更新表格和缓存对应的值
                                obj.update({
                                    mainname: value
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'setSubUrl') {
                /**
                 *修改主名称
                 */
                layer.prompt({
                    formType: 2
                    , title: '修改 ID 为 [' + data.id + '] 的子分类路径'
                    , value: data.url
                }, function (value, index) {
                    layer.close(index);
                    //这里一般是发送修改的Ajax请求
                    var menus = [];
                    var menu = {};
                    menu.id = data.id;
                    menu.url = value;
                    menus.push(menu);
                    $.ajax({
                        url: 'http://localhost:8086/updateMenuName',
                        type: 'post',
                        data: JSON.stringify(menus),
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            if (result.data == 0) {
                                alert("修改失败");
                            } else {
                                //同步更新表格和缓存对应的值
                                obj.update({
                                    url: value
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'soff') {
                $.ajax({
                    url: 'http://localhost:8086/turnOff?id=' + data.id,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        if (result.data == 0) {
                            alert("修改失败");
                        } else {
                            table.reload('subtable', {
                                url: 'http://localhost:8086/selectSubMenus?id=' + publicMenuId
                            });
                        }
                    }
                });
            } else if (obj.event === 'son') {
                $.ajax({
                    url: 'http://localhost:8086/turnOn?id=' + data.id,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        if (result.data == 0) {
                            alert("修改失败");
                        } else {
                            table.reload('subtable', {
                                url: 'http://localhost:8086/selectSubMenus?id=' + publicMenuId
                            });
                        }
                    }
                });
            }
        });


        /**
         *保存主菜单
         */
        $('#saveMainMenu').on('click', function () {
            layer.confirm('确认保存?', function (index) {
                var menus = [];
                var menu = {};
                menu.mainname = document.getElementById('mainNameInpute').value;
                menu.subid = '0';
                menu.enabled = 'Y';
                menus.push(menu);
                $.ajax({
                    url: 'http://localhost:8086/saveMenu',
                    type: 'post',
                    data: JSON.stringify(menus),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        layer.close(index);
                        if (result.data == 0) {
                            alert('保存失败');
                        } else {
                            table.reload('maintable', {
                                url: 'http://localhost:8086/selectAllMenus'
                            });
                        }
                    }
                });
            });
        });


        /**
         *保存子菜单
         */
        $('#saveSubMenu').on('click', function () {
            layer.confirm('确认保存?', function (index) {
                var menus = [];
                var menu = {};
                menu.mainname = document.getElementById('subNameInpute').value;
                menu.url = document.getElementById('subUrlInpute').value;
                menu.subid = publicMenuId;
                menu.enabled = 'Y';
                menus.push(menu);
                $.ajax({
                    url: 'http://localhost:8086/saveMenu',
                    type: 'post',
                    data: JSON.stringify(menus),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        layer.close(index);
                        if (result.data == 0) {
                            alert('保存失败');
                        } else {
                            table.reload('subtable', {
                                url: 'http://localhost:8086/selectSubMenus?id=' + publicMenuId
                            });
                        }
                    }
                });
            });
        });

    });
</script>
</body>
</html>